
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="wap-font-scale" content="no" />
    <title>教程</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css" />
    <link rel="stylesheet" type="text/css" href="/css/course.css" />
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/iscroll.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/template-native.js"></script>
    <script type="text/javascript" src="/hakka/index.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="/js/FileSaver.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".menu_box li:eq(7)").addClass("choose_menu");
            $(".mobile_menu_title").text("客家博物馆");
        });
    </script>
</head>
<style>
    .main {
        position: relative;
        /* background-color: burlywood; */
        height: 45vh;
    }
    h1 {
        text-align: center;
        color: #858585;
        background-color: white;
    }
    .select {
        text-align: center;
        /* background-color: blue; */
    }
    #questionAudio {
        margin-top: 10px;
    }
    .btn {
        width: 100px;
        height: 30px;
        margin: 10px 25px;
        border-radius: 20px;

    }
    .answer {
        /* background-color: brown; */
        text-align: center;
        line-height: 100px;
    }
    .contentkkk {
        width: 200px;
        height: 40px;
    }
    #submit {
        width: 100px;
        height: 45px;
    }
    .download {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 50px;
        font-weight: 900;
        background-color: #858585;
    }
</style>
<!-- <script>
        function previous(){
            document.getElementById('previoustAudio').src="../2.mp3";
        }
</script> -->
<body>
<!--页头 开始-->
<div class="head">
    <div class="head_in mtIn">
        <div class="drop_menu_btn"></div>
        <div class="mobile_menu_title"></div>
        <div class="head_left">
            <div class="menu_box">
                <i class="close_menu_box"></i>
                <div class="menu_box_in" id="drop_menu">
                    <ul>
                        <li><a th:href="@{/index.html}">辞典</a></li>
                        <li><a href="/hakka/tutorial.html">教材</a></li>
                        <li><a href="/hakka/collect.html">词条收集</a></li>
                        <li><a href="/hakka/mandarin_to_hakka.html">客普翻译</a></li>
                        <li><a href="/hakka/hanzi_to_pinyin.html">线上注音</a></li>
                        <li><a href="/hakka/languageRegion.html" target="_blank">语言地区</a></li>
                        <!--									<li><a href="/hakka/voice.html">语音搜索</a></li>-->
                        <li><a href="/hakka/hot.html">网址导航</a></li>
                        <li><a href="/hakka/museum.html">客家博物馆</a></li>
                        <!--									<li><a href="/hakka/voice.html">语音搜索</a></li>-->
                        <!-- <li><a href="./hakka/ime/typewriting.htm">输入法</a></li> -->
                        <!--li><a href="/hakka/bbs/" target="_blank">讨论</a></li-->

                    </ul>
                </div>
            </div>
        </div>
        <div class="head_right">
            <ul class="head_right_list">
                <li><a href="/login.html">登录</a></li>
                <li class="register_btn"><a href="/register.html">注册</a></li>
            </ul>
        </div>
    </div>
</div>
    <h1>客家博物馆音译问卷调查</h1>
    <!-- 需要装插件的方法 -->
    <!-- <embed height="100" width="100" src="/i/horse.mp3"></embed> -->
    <!-- <audio controls="controls" height="100" width="100">
        <source src="song.mp3" type="audio/mp3" />
        <source src="song.ogg" type="audio/ogg" />
    </audio> -->

    <div class="banner">
        <img style="width: 100%;height: 250px;" src="/image/search/background.jpg" alt="">
    </div>
    <div class="main">
        <h1 id="qid" align="center"></h1>
        <div class="select">
            <audio controls="controls" src="/mp3/1.mp3" autoplay="autoplay" loop="loop" id="questionAudio"></audio>
            <div class="or">
                <button class="btn" onclick="previous()">上一个音频</button>
                <button class="btn" onclick="next()">下一个音频</button>
            </div>
        </div>
        <div class="answer">
            <input id="content01" type="text" class="contentkkk" placeholder="请填写您听到的内容">
            <button id="submit" onclick="CommitTo()">提交</button>
        </div>
<!--        <button class="download" ><a href="/log/downApp/user_answers.xls">下载</a></button>-->
        <button class="download" onclick="download01()">下载数据</a></button>
    </div>
    <script>
        var index = 1;
        function previous(){
            if(index==1){
                alert("已经是第一个了");
                return;
            }
            index=((index-1)%52);
            document.getElementById('questionAudio').src="/mp3/"+ index+".mp3";
            document.getElementById('qid').innerText = "当前题号："+index;
        }
        function next(){
            index=((index+1)%52);
            if(index%10==0){
                alert("你已经完成10道题");
            }
            document.getElementById('questionAudio').src="/mp3/"+ index+".mp3";
            document.getElementById('qid').innerText = "当前题号："+index;
        }
    </script>
<script type="text/javascript">

    function CommitTo() {
        if ($("#content01").val()==""){
            alert("请输入你听到的内容");
            return;
        }
         var AAnswer={
            mp3Id:$("#questionAudio").attr("src"),
            userAnswer:$("#content01").val()
         };
         console.log(AAnswer);
        $.ajax({            //几个参数需要注意一下
            type: "POST",//提交数据的方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/users/commit" ,//后台接收参数的文件地址
            contentType: "application/json",
            data:JSON.stringify(AAnswer),
            success: function (result) {
                alert(result);
                // console.log(result);//打印服务端返回的数据(调试用)
                // if (result.resultCode == 200) {
                //     alert("SUCCESS");
                // }
                $("#content01").val("");
            },
            error : function() {
                alert("异常！");
            }
        });
    }
    // function Download() {
    //     $.ajax({            //几个参数需要注意一下
    //         type: "POST",//提交数据的方法类型
    //         url: "/log/downApp/AnswerTotal.txt" //后台接收参数的文件地址
    //     });
    //
    // }
    // function download01(text) {
    //     var element = document.createElement('a');
    //     element.setAttribute('href', 'data:text/plain;charset=ANSI,' + encodeURIComponent(text));
    //     element.setAttribute('download', "data.csv");
    //
    //     element.style.display = 'none';
    //     document.body.appendChild(element);
    //
    //     element.click();
    //
    //     document.body.removeChild(element);
    // }
    function download01() {
        $.ajax({            //几个参数需要注意一下
            type: "GET",//提交数据的方法类型
            dataType: "text",//预期服务器返回的数据类型
            url: "/users/SelectAll" ,//后台接收参数的文件地址
            contentType: "application/json",
            success: function (result) {
                const blob = new Blob(['\ufeff'+result], {type: "text/csv;charset=UTF-8"})
                //const blob = new Blob([data], {type: 'audio/wav'})
                const a= document.createElement("a")
                a.href = URL.createObjectURL(blob)
                a.download = "fileName" // 这里填保存成的文件名
                a.click()
                URL.revokeObjectURL(a.href)
                a.remove();
            },
            error : function() {
                alert("异常！");
            }
        });
        // const blob = new Blob(['\ufeff'+text], {type: "text/csv;charset=UTF-8"})
        // //const blob = new Blob([data], {type: 'audio/wav'})
        // const a= document.createElement("a")
        // a.href = URL.createObjectURL(blob)
        // a.download = "fileName" // 这里填保存成的文件名
        // a.click()
        // URL.revokeObjectURL(a.href)
        // a.remove();
    }
</script>

<!--<link rel="stylesheet" type="text/css" href="/css/footer.css" />-->
<!--合作单位：梅州市客家博物馆-->
    <div id="footer" style="text-align: center">
        <img th:src="@{/image/index/logo1.png}"/>
    </div>

</body>
</html>